import React, { useState, useEffect } from "react";
import Taro, {
  useReady,
  useDidShow,
  useDidHide,
  usePullDownRefresh,
  getCurrentInstance,
} from "@tarojs/taro";
import { View, Button } from "@tarojs/components";
import "./detail.scss";

// class Detail extends Component {
//     // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
//     // 而不是频繁地调用此 API
//     $instance = getCurrentInstance()
//     state = {
//         text: ''
//     }
//     componentDidMount() {
//         // 获取路由参数
//         // console.log(this.$instance.router)
//         Taro.request({
//             url: `http://jsonplaceholder.typicode.com/posts/${this.$instance.router.params.id}`,
//             success: (res) => {
//                 this.setState({ text: res.data.body }, () => {
//                     console.log('获取详情', this.state.text)
//                 })
//             }
//         })
//     }
//     goHome() {
//         Taro.switchTab({
//             url: `/pages/index/index`
//         })
//     }
//     render() {
//         return (
//             <View>
//                 <View>详情页</View>
//                 <View>{this.state.text}</View>
//                 <Button onClick={this.goHome} className='btn-max-w' plain type='primary'>返回首页</Button>
//             </View>
//         )
//     }
// }

// Hook
const Detail = () => {
  const $instance = getCurrentInstance();
  const [text, setText] = useState("");

  const getDetail = () => {
    // 获取路由参数
    console.log($instance.router);
    // 获取数据
    Taro.request({
      url: `http://jsonplaceholder.typicode.com/posts/${$instance.router.params.id}`,
      success: (res) => {
        setText(res.data.body);
      },
    });
  };
  const goHome = () => {
    Taro.switchTab({
      url: `/pages/pages-index/index/index`,
    });
  };

  // 可以使用所有的 React Hooks
  useEffect(() => {
    getDetail();
  },[]);

  // 对应 onReady
  useReady(() => {});

  // 对应 onShow
  useDidShow(() => {});

  // 对应 onHide
  useDidHide(() => {});

  // Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
  // 详情可查阅：【Taro 文档】-> 【进阶指南】->【Hooks】
  usePullDownRefresh(() => {});
  return (
    <View className='detail-bg'>
      <View className='red-text'>详情页</View>
      <View>{text}</View>
      <Button
        onClick={goHome}
        className='btn-max-w bottom-btn'
        plain
        type='primary'
      >
        返回首页
      </Button>
    </View>
  );
};
export default Detail;
